<!DOCTYPE html>
<html lang="en">
<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>

</head>
<body>
<!--<button onclick="openMedia()">开启摄像头</button>-->
<video id="video" width="320px" height="240px" autoplay="autoplay"></video>
<canvas id="canvas" width="320px" height="240px"></canvas>
<button onclick="takePhoto()">拍照</button>
<input type="button" class="button11_big" value="拍照" id="saveBtn" onclick="savePhoto();"/>
<img id="imgTag" src="" alt="imgTag" style="display: none">
<!--<button onclick="closeMedia()">关闭摄像头</button>-->

<script>

    function savePhoto(){

    }

    $(function () {
        var w = 320, h = 240;
        var pos = 0, ctx = null, saveCB, image = [];

        var canvas = document.createElement("canvas");
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        // console.log(canvas.toDataURL);
        if (canvas.toDataURL) {

            ctx = canvas.getContext("2d");

            image = ctx.getImageData(0, 0, w, h);

            saveCB = function (data) {

                var col = data.split(";");
                var img = image;

                for (var i = 0; i < w; i++) {
                    var tmp = parseInt(col[i]);
                    img.data[pos + 0] = (tmp >> 16) & 0xff;
                    img.data[pos + 1] = (tmp >> 8) & 0xff;
                    img.data[pos + 2] = tmp & 0xff;
                    img.data[pos + 3] = 0xff;
                    pos += 4;
                }

                if (pos >= 4 * w * h) {
                    ctx.putImageData(img, 0, 0);
                    $.ajax({
                        type: "post",
                        url: "<n:base/>/catDServlet?ttt=0",
                        data: {type: "pixel", image: canvas.toDataURL("image/jpg")},
                        dataType: "html",
                        success: function (data) {
                            // console.log("===="+data);
                            pos = 0;
                            document.getElementById("paizhaoImg").value = data;
                            setTimeout(delPhoto(), 5);
                        }
                    });
                }
            };

        } else {

            saveCB = function (data) {
                image.push(data);

                pos += 4 * w;
                if (pos >= 4 * w * h) {
                    $.ajax({
                        type: "post",
                        url: "<n:base/>/catDServlet?ttt=1",
                        data: {type: "pixel", image: image.join('|')},
                        dataType: "html",
                        success: function (msg) {
                            //console.log("+++++"+eval(msg));
                            pos = 0;
                            document.getElementById("paizhaoImg").value = msg;
                            setTimeout(delPhoto(), 5);
                        }
                    });
                }
            };
        }

    });
</script>
</body>